<template>
  <!-- =======================列表展示（开始）======================== -->
  <el-container class="tablePage">
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="userId"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column type="index" :index="indexMethod" label="序号" width="120"></el-table-column>
        <!-- <el-table-column prop="userId" v-show="false" label="姓名" width="120"></el-table-column> -->
        <el-table-column prop="userLoginName" label="用户名" width="120"></el-table-column>
        <el-table-column prop="userName" label="姓名" width="120"></el-table-column>
        <el-table-column prop="userSex" :formatter="formatRole" label="性别" width="120"></el-table-column>
        <el-table-column prop="userPhone" label="联系电话" width="120"></el-table-column>
        <el-table-column prop="userEmail" label="邮箱" width="120"></el-table-column>
        <el-table-column prop="userCreateTime" :formatter="formatDate1" label=" 创建时间" width="120"></el-table-column>
        <el-table-column prop="userUpdateTime" :formatter="formatDate2" label="最后修改时间" width="120"></el-table-column>
        <el-table-column prop="userStatus" :formatter="formatStatus" label="状态" width="100"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="200"
          v-if="$store.state.updateUserFlag ||$store.state.deletetUserFlag
          || $store.state.insertUserStatus || $store.state.setUserRoleFlag
          "
        >
          <template slot-scope="scope">
            <el-button
              type="primary "
              prop="userId"
              class="updatebtn"
              icon="el-icon-edit"
              circle
              size="mini"
              v-if="$store.state.updateUserFlag"
              @click="updateUserManager(scope.row)"
            ></el-button>
            <el-button
              type="danger "
              icon="el-icon-delete"
              circle
              size="mini"
              @click="deleteForm(scope.row.userId)"
              v-if="$store.state.deletetUserFlag"
            ></el-button>
            <el-button
              type="warning "
              icon="el-icon-warning"
              circle
              size="mini"
              v-if="$store.state.insertUserStatus"
              @click="updateStatus(scope.row.userId)"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              v-if="$store.state.setUserRoleFlag"
              @click="setRole(scope.row)"
            >设置角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </el-footer>
  </el-container>
  <!-- =======================列表展示（结束）======================== -->
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  props: ["allList", "getSelectData"],
  data() {
    return {
      user: {},
      deleteFlag: null,
      updateFlag: null,
      tableData: [],
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
      multipleSelection: [],
    };
  },
  methods: {
    getPage() {
      const that = this;
    },
    updateUserManager(val) {
      this.$emit("edit", val, true);
    },
    setRole(val) {
      // console.log(val)
      this.$emit("openDialog", val, true);
    },
    updateStatus(val) {
      var that = this;
      that.$http
        .get("/user/updateStatusById", {
          params: { id: val },
        })
        .then((res) => {
          if (res.data == 1) {
            Message({ message: "修改成功", type: "success" });
            that.userList();
          } else {
            Message({ message: "修改失败", type: "error" });
          }
        });
    },
    indexMethod(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    formatStatus(row) {
      return row.userStatus == 1 ? "有效" : "无效";
    },
    formatRole(row) {
      return row.userSex == 1 ? "男" : "女";
    },
    formatDate1(row) {
      var date = new Date(row.userCreateTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() / 10 > 1 ? date.getDate() : "0" + date.getDate();
      return Y + M + D;
    },
    formatDate2(row) {
      var date = new Date(row.userUpdateTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() / 10 > 1 ? date.getDate() : "0" + date.getDate();
      return Y + M + D;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //   console.log(this.multipleSelection)
      this.$emit("handleSelections", this.multipleSelection);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.userList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.userList();
    },
    userList() {
      const vm = this;
      const p = new URLSearchParams();
      p.append("pageSize", vm.page.size);
      p.append("pageNum", vm.page.current);
      let startTime;
      let stopTime;
      if (vm.getSelectData.queryTime) {
        startTime =
          vm.getSelectData.queryTime[0] != undefined
            ? new Date(vm.getSelectData.queryTime[0])
            : null;
        stopTime =
          vm.getSelectData.queryTime[1] != undefined
            ? new Date(vm.getSelectData.queryTime[1])
            : null;
      }
      if (startTime != null || stopTime != null) {
        p.append("startTime", startTime);
        p.append("stopTime", stopTime);
      }
      let status;
      if (vm.getSelectData.status == "有效") {
        status = 1;
      } else if (vm.getSelectData.status == "无效") {
        status = 0;
      } else {
        status = -1;
      }
      p.append("status", status);
      p.append("loginName", vm.getSelectData.username);
      p.append("userName", vm.getSelectData.name);
      vm.$http({
        method: "post",
        url: "/user/userSelectByCondition",
        data: p,
      }).then((res) => {
        vm.tableData = res.data.list;
        vm.page.total = res.data.total;
      });
    },

    deleteForm(index) {
      var that = this;
      that.$http
        .get("/user/updateHidden", {
          params: { userId: index },
        })
        .then(function (response) {
          var data = response.data;
          if (data == 1) {
            Message({ message: "删除成功", type: "success" });
            that.userList();
          } else {
            Message({ message: "删除失败", type: "error" });
          }
        });
    },
  },
  mounted() {
    this.$emit("page", this.page);
  },
  watch: {
    allList: {
      handler(nval, oval) {
        // console.log(nval);
        this.tableData = nval.data.list;
        this.page.total = nval.data.total;
      },
    },
    getSelectData: {
      handler(nval, oval) {
        this.userList();
      },
      deep: true,
    },
  },
};
</script>
<style lang='less' scoped>
.tablePage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // height: 575px;
}
</style>